import React, { memo } from "react";
import CLThemeHeaderRcd from "@/components/theme-header-rcd";
import { RankingWrapper } from "./style";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { getSongListAction } from "../../store/actionCreators";
import { useEffect } from "react";
import { getSongDetailAction } from "../../../../../player/store/actionCreator";
export default memo(function CLRecommendRank() {
  //state

  // redux hooks
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getSongListAction());
  }, [dispatch]);

  const { songList } = useSelector(
    (state) => ({
      songList: state.getIn(["recommend", "songList"]),
    }),
    shallowEqual
  );

  const addSongList = (id) => {
    // console.log(id);
    dispatch(getSongDetailAction(id));
  };
  //other hooks

  return (
    <RankingWrapper>
      <CLThemeHeaderRcd title="榜单"></CLThemeHeaderRcd>
      <div className="tops">
        <div className="songList">
          {songList.map((item, index) => {
            return (
              <div className="song-item" key={item.id}>
                <div>{item.name}</div>
                <div className="playBtn" onClick={(e) => addSongList(item.id)}>
                  播放
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </RankingWrapper>
  );
});
